<template>
  <view class="shop-page">
    <!-- 头部搜索栏 -->
    <view class="header">
      <view class="search-container">
        <!-- 修改后的搜索输入框 - 实现竖向文字轮播 -->
        <view class="search-input-wrapper" @click="goSearch()">
          <view class="search-carousel">
            <view
                class="carousel-text"
                :class="{ active: currentIndex === index }"
                v-for="(text, index) in searchTexts"
                :key="index"
            >
              {{ text }}
            </view>
          </view>
        </view>

        <!-- 修改后的右侧图标 - 购物车和我的订单 -->
        <view class="header-icons">
          <image class="header-icon" src="../..//static/images/gouwuche.png" @click="navTo('/pages/cart/cart'+`?userAccount=${account_user}`)"/>
          <image class="header-icon" src="../..//static/images/wodedingdan.png" @click="goToOrder()"/>
        </view>
      </view>
    </view>

    <!-- 一级导航栏 - 重新设计为移动端风格,固定在页面上方 -->
    <view class="primary-nav">
      <scroll-view
          class="nav-scroll"
          scroll-x="true"
          show-scrollbar="false"
          enhanced
          :scroll-with-animation="true"
          :bounces="false"
      >
        <view class="nav-list">
          <view
              class="nav-tab"
              :class="{ active: activeNavIndex === index }"
              v-for="(item, index) in navItems"
              :key="index"
              @click="switchNav(index)"
          >
            <text class="nav-text">{{ item.name }}</text>
            <view class="nav-indicator" v-if="activeNavIndex === index"></view>
          </view>
        </view>
      </scroll-view>
      <view class="nav-mores" @click="showMore">
        <image class="nav-more" src="../..//static/images/gengduo.png"></image>


      </view>
    </view>

    <!-- 主要内容区域 - 添加顶部间距以适应固定导航栏 -->
    <view class="main-content">
      <!-- 推荐页面内容 - 保持原有内容 -->
      <view v-if="activeNavIndex === 0" class="recommend-content">
        <!-- 轮播图 -->
        <view class="carousel">
          <swiper :autoplay="true" :interval="3000" circular indicator-dots indicator-active-color="#ff4757"
                  indicator-color="rgba(255, 255, 255, 0.5)">
            <swiper-item v-for="(item, index) in carouselItems" :key="index">
              <image class="carousel-image" :src="item.image" mode="aspectFill"/>
            </swiper-item>
          </swiper>
        </view>

        <!-- 功能导航区 - 只保留3个设备按钮 -->
        <view class="function-nav">
          <view class="nav-item" @click="navTo('/pages/product/list')">
            <view class="nav-icon">
              <image src="/static/images/28f5925aabbbcf7708706a91b913cc18.png"></image>
            </view>
            <text class="nav-name">加热设备</text>
          </view>
          <view class="nav-item" @click="navTo('/pages/product/list')">
            <view class="nav-icon">
              <image src="/static/images/9a2f830b92ed68460de301da669703f4.png"></image>
            </view>
            <text class="nav-name">慢拌设备</text>
          </view>
          <view class="nav-item" @click="navTo('/pages/product/list')">
            <view class="nav-icon">
              <image src="/static/images/79207450675451bfebaed7f10e194569.png"></image>
            </view>
            <text class="nav-name">低温设备</text>
          </view>
          <!-- 新添加的粉碎设备按钮 -->
          <view class="nav-item" @click="navTo('/pages/product/list')">
            <view class="nav-icon">
              <image src="../..//static/images//fensuijitubiao.jpg"></image>
            </view>
            <text class="nav-name">粉碎设备</text>
          </view>
        </view>

        <!-- 秒杀/限时特惠区域 -->
        <view class="seckill-section1">
          <view class="section-header">
            <view class="header-left">
              <text class="seckill-title">限时特惠</text>
              <text class="seckill-subtitle">品质保证,低至1元</text>
            </view>
            <view class="header-right" @click="navTo('/pages/product/list')">
              <text class="more-text">查看全部</text>
              <text class="arrow">></text>
            </view>
          </view>
        </view>
        <view class="seckill-section2">
          <scroll-view
              class="seckill-scroll"
              scroll-x="true"
              show-scrollbar="false"
              :scroll-left="scrollLeft"
              @scroll="onScroll"
              enhanced
              :bounces="false"
          >
            <view class="seckill-list">
              <view class="seckill-item" v-for="(item, index) in displayShopItems" :key="index" @click="gotoshop(item)">
                <view class="seckill-image">
                  <image :src="getProductImage(item)" mode="aspectFill"/>
                  <view class="price-tag">
                    <text class="price-symbol">¥</text>
                    <text class="price-num">{{ item.money_commodity }}</text>
                  </view>
                </view>
                <view class="seckill-info">
                  <text class="seckill-name">{{ item.name_commodity }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 商品瀑布流 -->
        <view class="products-waterfall">
          <view class="product-column">
            <view class="product-item" v-for="(item, index) in leftColumnProducts" :key="'left-' + index" @click="gotoshop(item)">
              <view class="product-image">
                <image :src="getProductImage(item)" mode="aspectFill"/>
                <view class="discount-tag" v-if="item.discount">
                  <text>-{{ item.discount }}%</text>
                </view>
              </view>
              <view class="product-content">
                <text class="product-title">{{ item.name_commodity }}</text>
                <text class="product-desc">{{ item.description_commodity }}</text>
                <view class="price-row">
                  <view class="current-price">
                    <text class="currency">¥</text>
                    <text class="amount">{{ item.money_commodity }}</text>
                  </view>
                  <view class="sales-info">
                    <text>已售{{ Math.floor(Math.random() * 1000) + 100 }}件</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="product-column">
            <view class="product-item" v-for="(item, index) in rightColumnProducts" :key="'right-' + index"
                  @click="gotoshop(item)">
              <view class="product-image">
                <image :src="getProductImage(item)" mode="aspectFill"/>
                <view class="discount-tag" v-if="item.discount">
                  <text>-{{ item.discount }}%</text>
                </view>
              </view>
              <view class="product-content">
                <text class="product-title">{{ item.name_commodity }}</text>
                <text class="product-desc">{{ item.description_commodity }}</text>
                <view class="price-row">
                  <view class="current-price">
                    <text class="currency">¥</text>
                    <text class="amount">{{ item.money_commodity }}</text>
                  </view>
                  <view class="sales-info">
                    <text>已售{{ Math.floor(Math.random() * 1000) + 100 }}件</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 其他导航的下拉菜单内容 -->
      <view v-else class="dropdown-content">
        <!-- 竖向滑动的商品列表 -->
        <scroll-view class="vertical-scroll" scroll-y="true" show-scrollbar="false" enhanced :bounces="true">
          <!-- 商品瀑布流布局 -->
          <view class="products-waterfall">
            <view class="product-column">
              <view class="product-item"
                    v-for="(item, index) in getCategoryProducts().filter((_, i) => i % 2 === 0)"
                    :key="index"
                    @click="gotoshop(item)">
                <view class="product-image">
                  <image :src="getProductImage(item)" mode="aspectFill"/>
                </view>
                <view class="product-content">
                  <text class="product-title">{{ item.name_commodity }}</text>
                  <text class="product-desc">{{ item.description_commodity }}</text>
                  <view class="price-row">
                    <view class="current-price">
                      <text class="currency">¥</text>
                      <text class="amount">{{ item.money_commodity }}</text>
                    </view>
                    <view class="sales-info">
                      <text>已售{{ Math.floor(Math.random() * 1000) + 100 }}件</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="product-column">
              <view class="product-item"
                    v-for="(item, index) in getCategoryProducts().filter((_, i) => i % 2 === 1)"
                    :key="index"
                    @click="gotoshop(item)">
                <view class="product-image">
                  <image :src="getProductImage(item)" mode="aspectFill"/>
                </view>
                <view class="product-content">
                  <text class="product-title">{{ item.name_commodity }}</text>
                  <text class="product-desc">{{ item.description_commodity }}</text>
                  <view class="price-row">
                    <view class="current-price">
                      <text class="currency">¥</text>
                      <text class="amount">{{ item.money_commodity }}</text>
                    </view>
                    <view class="sales-info">
                      <text>已售{{ Math.floor(Math.random() * 1000) + 100 }}件</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 加载更多指示器 -->
          <view class="loading-more">
            <text class="loading-text">{{ isLoading ? '加载中...' : '上拉加载更多' }}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 智能筛选弹窗 -->
    <view class="filter-modal" v-if="showFilterModal" @click="closeFilterModal">
      <view class="filter-content" @click.stop>
        <view class="filter-header">
          <text class="filter-title">智能筛选</text>
          <view class="close-btn" @click="closeFilterModal">×</view>
        </view>

        <scroll-view class="filter-body" scroll-y>
          <!-- 标击区间 -->
          <view class="filter-section">
            <view class="section-title">
              <text>标击区间</text>
              <switch :checked="filters.priceRange.enabled" @change="toggleFilter('priceRange')" color="#1890ff"/>
            </view>
            <view class="filter-options" v-if="filters.priceRange.enabled">
              <view
                  class="option-item"
                  :class="{active: filters.priceRange.value === item}"
                  v-for="item in priceRanges"
                  :key="item"
                  @click="selectFilter('priceRange', item)"
              >
                {{item}}
              </view>
            </view>
          </view>

          <!-- 温度区间 -->
          <view class="filter-section">
            <view class="section-title">
              <text>温度区间</text>
              <switch :checked="filters.tempRange.enabled" @change="toggleFilter('tempRange')" color="#1890ff"/>
            </view>
            <view class="filter-options" v-if="filters.tempRange.enabled">
              <view
                  class="option-item"
                  :class="{active: filters.tempRange.value === item}"
                  v-for="item in tempRanges"
                  :key="item"
                  @click="selectFilter('tempRange', item)"
              >
                {{item}}
              </view>
            </view>
          </view>

          <!-- 温度配置长 -->
          <view class="filter-section">
            <view class="section-title">
              <text>温度配置长</text>
              <switch :checked="filters.tempConfig.enabled" @change="toggleFilter('tempConfig')" color="#1890ff"/>
            </view>
            <view class="filter-options" v-if="filters.tempConfig.enabled">
              <view
                  class="option-item"
                  :class="{active: filters.tempConfig.value === item}"
                  v-for="item in tempConfigs"
                  :key="item"
                  @click="selectFilter('tempConfig', item)"
              >
                {{item}}
              </view>
            </view>
          </view>

          <!-- 温度范围 -->
          <view class="filter-section">
            <view class="section-title">
              <text>温度范围</text>
              <switch :checked="filters.tempScope.enabled" @change="toggleFilter('tempScope')" color="#1890ff"/>
            </view>
            <view class="slider-container" v-if="filters.tempScope.enabled">
              <text class="slider-label">{{filters.tempScope.value}}℃</text>
              <slider
                  :value="filters.tempScope.value"
                  @change="sliderChange('tempScope', $event)"
                  min="0"
                  max="500"
                  show-value
                  activeColor="#1890ff"
              />
            </view>
          </view>

          <!-- 功率 -->
          <view class="filter-section">
            <view class="section-title">
              <text>功率</text>
              <switch :checked="filters.power.enabled" @change="toggleFilter('power')" color="#1890ff"/>
            </view>
            <view class="slider-container" v-if="filters.power.enabled">
              <text class="slider-label">{{filters.power.value}}W</text>
              <slider
                  :value="filters.power.value"
                  @change="sliderChange('power', $event)"
                  min="0"
                  max="5000"
                  step="100"
                  show-value
                  activeColor="#1890ff"
              />
            </view>
          </view>

          <!-- 消热量 -->
          <view class="filter-section">
            <view class="section-title">
              <text>消热量</text>
              <switch :checked="filters.heat.enabled" @change="toggleFilter('heat')" color="#1890ff"/>
            </view>
            <view class="slider-container" v-if="filters.heat.enabled">
              <text class="slider-label">{{filters.heat.value}}kJ</text>
              <slider
                  :value="filters.heat.value"
                  @change="sliderChange('heat', $event)"
                  min="0"
                  max="1000"
                  step="10"
                  show-value
                  activeColor="#1890ff"
              />
            </view>
          </view>

          <!-- 压强值 -->
          <view class="filter-section">
            <view class="section-title">
              <text>压强值</text>
              <switch :checked="filters.pressure.enabled" @change="toggleFilter('pressure')" color="#1890ff"/>
            </view>
            <view class="slider-container" v-if="filters.pressure.enabled">
              <text class="slider-label">{{filters.pressure.value}}Pa</text>
              <slider
                  :value="filters.pressure.value"
                  @change="sliderChange('pressure', $event)"
                  min="0"
                  max="200"
                  show-value
                  activeColor="#1890ff"
              />
            </view>
          </view>

          <!-- 智能选择 -->
          <view class="filter-section">
            <view class="section-title">
              <text>智能选择</text>
              <switch :checked="filters.smartSelect.enabled" @change="toggleFilter('smartSelect')" color="#1890ff"/>
            </view>
          </view>
        </scroll-view>

        <view class="filter-footer">
          <button class="reset-btn" @click="resetFilters">重置</button>
          <button class="apply-btn" @click="applyFilters">应用筛选</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {_allshopequip} from '@/service/shop.js'
import {_bindequips} from '@/service/shop.js'
import {_typeshopequip} from '@/service/shop.js'
import {_accountrecords} from '@/service/shop.js'

export default {
  data() {
    return {
      account_user: '',
      shop: [],
      searchText: '',
      x1: 0,
      y1: 0,
      isLoading: false,
      // 搜索轮播相关数据
      searchTexts: ['加热设备', '慢拌设备', '低温设备'],
      currentIndex: 0,
      carouselTimer: null,
      // 手动滚动相关数据
      scrollLeft: 0,
      carouselItems: [
        {image: "../../static/images/lunbotu1.jpg"},
        {image: "../../static/images/lunbotu2.jpg"},
        {image: "../../static/images/lunbotu3.jpg"}
      ],
      // 智能筛选相关数据
      showFilterModal: false,
      filters: {
        priceRange: { enabled: false, value: '' },
        tempRange: { enabled: false, value: '' },
        tempConfig: { enabled: false, value: '' },
        tempScope: { enabled: false, value: 100 },
        power: { enabled: false, value: 1000 },
        heat: { enabled: false, value: 100 },
        pressure: { enabled: false, value: 50 },
        smartSelect: { enabled: false }
      },
      priceRanges: ['0-1000', '1000-2000', '2000-3000', '3000以上'],
      tempRanges: ['0-100℃', '100-200℃', '200-300℃', '300℃以上'],
      tempConfigs: ['短', '中', '长'],
      // 一级导航相关数据
      navItems: [
        {name: '推荐', type: 'recommend'},
        {name: '耗材配件', type: 'consumables'},
        {name: '家电清洗', type: 'cleaning'},
        {name: '居家生活', type: 'home'},
        {name: '空调', type: 'aircon'},
        {name: '冰箱', type: 'fridge'},
        {name: '洗衣机', type: 'washer'}
      ],
      activeNavIndex: 0, // 当前选中的导航索引
      // 分类商品数据
      categoryProducts: {
        consumables: [
          {
            name_commodity: '空心阴极灯',
            description_commodity: '确保发光照度,使用寿命长',
            money_commodity: '29.9',
            isNew: true,
            originalPrice: '39.9',
            image: '../../static/images/kongxinyinjideng.jpg'
          },
          {
            name_commodity: '交叉接头',
            description_commodity: '严格公差,优质品质',
            money_commodity: '19.9',
            originalPrice: '29.9',
            image: '../../static/images/jiaochajietou.jpg'
          },
          {
            name_commodity: '一次性手套',
            description_commodity: '价格实惠,量多从优',
            money_commodity: '15.9',
            image: '../../static/images/yicixingshoutao.jpg'
          },
          {
            name_commodity: '减压器及阀门',
            description_commodity: '精密调压,输出稳定',
            money_commodity: '35.9',
            isNew: true,
            image: '../../static/images/tiaoyaqijifamen.jpg'
          },
        ],
        cleaning: [
          {
            name_commodity: '温高压蒸汽清洗机',
            description_commodity: '蒸汽调节灵活,加热速度快',
            money_commodity: '89.9',
            originalPrice: '119.9',
            isNew: true,
            image: '../../static/images/zhengqiqingxiji.png'
          },
          {
            name_commodity: '超声波清洗机',
            description_commodity: '清洁无死角,深度去污',
            money_commodity: '25.9',
            image: '../../static/images/chaoshenboqingxiji.png'
          },
          {name_commodity: '洗衣机清洗泡腾片', description_commodity: '泡腾设计,清洁彻底', money_commodity: '18.9'},
          {name_commodity: '冰箱清洁湿巾', description_commodity: '抗菌清洁,安全无害', money_commodity: '13.9'},
          {
            name_commodity: '油烟机清洗液',
            description_commodity: '强力去油,不伤机器',
            money_commodity: '22.9',
            isNew: true
          },
          {name_commodity: '电视屏幕清洁剂', description_commodity: '无痕清洁,保护屏幕', money_commodity: '16.9'},
          {name_commodity: '微波炉清洁球', description_commodity: '柔软材质,不刮花', money_commodity: '9.9'},
          {name_commodity: '家电清洁刷套装', description_commodity: '多种刷头,全面清洁', money_commodity: '32.9'},
        ],
        home: [
          {
            name_commodity: '智能插座',
            description_commodity: 'WiFi远程控制,定时开关',
            money_commodity: '39.9',
            isNew: true
          },
          {
            name_commodity: '空气加湿器',
            description_commodity: '静音设计,持久保湿',
            money_commodity: '159.9',
            originalPrice: '199.9'
          },
          {name_commodity: 'LED台灯', description_commodity: '护眼光源,无频闪', money_commodity: '79.9'},
          {name_commodity: '收纳整理箱', description_commodity: '大容量,可折叠', money_commodity: '29.9'},
          {
            name_commodity: '智能温湿度计',
            description_commodity: '实时监测,手机查看',
            money_commodity: '49.9',
            isNew: true
          },
          {name_commodity: '防潮除湿盒', description_commodity: '天然除湿,环保安全', money_commodity: '19.9'},
          {name_commodity: '多功能收纳架', description_commodity: '可调高度,承重力强', money_commodity: '89.9'},
          {
            name_commodity: '香薰加湿器',
            description_commodity: '加湿香薰二合一',
            money_commodity: '129.9',
            originalPrice: '169.9'
          },
        ],
        aircon: [
          {
            name_commodity: '1.5匹变频空调',
            description_commodity: '一级能效,静音运行',
            money_commodity: '2299',
            originalPrice: '2699',
            isNew: true
          },
          {
            name_commodity: '3匹柜式空调',
            description_commodity: '大功率制冷,适合客厅',
            money_commodity: '3899',
            originalPrice: '4299'
          },
          {name_commodity: '移动空调', description_commodity: '免安装,即插即用', money_commodity: '1899'},
          {
            name_commodity: '空调挡风板',
            description_commodity: '防直吹,保护健康',
            money_commodity: '45.9',
            isNew: true
          },
          {name_commodity: '空调清洗工具', description_commodity: '专业清洗,延长寿命', money_commodity: '59.9'},
          {name_commodity: '空调遥控器', description_commodity: '万能遥控,兼容性强', money_commodity: '29.9'},
          {name_commodity: '空调支架', description_commodity: '加厚钢材,安全可靠', money_commodity: '89.9'},
          {
            name_commodity: '中央空调',
            description_commodity: '全屋制冷,智能控制',
            money_commodity: '12999',
            originalPrice: '15999'
          },
        ],
        fridge: [
          {
            name_commodity: '双门冰箱',
            description_commodity: '节能环保,大容量',
            money_commodity: '1899',
            originalPrice: '2199',
            isNew: true
          },
          {name_commodity: '三门冰箱', description_commodity: '精确控温,保鲜更久', money_commodity: '2699'},
          {
            name_commodity: '对开门冰箱',
            description_commodity: '超大容量,豪华配置',
            money_commodity: '4299',
            originalPrice: '4899'
          },
          {
            name_commodity: '迷你冰箱',
            description_commodity: '小巧便携,宿舍必备',
            money_commodity: '399.9',
            isNew: true
          },
          {name_commodity: '车载冰箱', description_commodity: '制冷制热,车家两用', money_commodity: '899.9'},
          {name_commodity: '冰箱收纳盒', description_commodity: '分类存储,整洁有序', money_commodity: '29.9'},
          {name_commodity: '冰箱温度计', description_commodity: '精准测温,食品安全', money_commodity: '19.9'},
          {name_commodity: '冰箱保鲜盒', description_commodity: '真空保鲜,营养不流失', money_commodity: '39.9'},
        ],
        washer: [
          {
            name_commodity: '滚筒洗衣机',
            description_commodity: '大容量,静音洗涤',
            money_commodity: '1999',
            originalPrice: '2399',
            isNew: true
          },
          {name_commodity: '波轮洗衣机', description_commodity: '省电节水,洗净度高', money_commodity: '1299'},
          {
            name_commodity: '洗烘一体机',
            description_commodity: '洗烘一体,省时省力',
            money_commodity: '2899',
            originalPrice: '3299'
          },
          {
            name_commodity: '迷你洗衣机',
            description_commodity: '小巧便携,单身必备',
            money_commodity: '299.9',
            isNew: true
          },
          {name_commodity: '洗衣机底座', description_commodity: '防震减噪,提升高度', money_commodity: '159.9'},
          {name_commodity: '洗衣机清洁剂', description_commodity: '深层清洁,杀菌除垢', money_commodity: '25.9'},
          {name_commodity: '洗衣袋套装', description_commodity: '保护衣物,分类清洗', money_commodity: '19.9'},
          {name_commodity: '洗衣机龙头', description_commodity: '专用接头,安装简便', money_commodity: '35.9'},
        ]
      }
    };
  },
  computed: {
    leftColumnProducts() {
      return this.shop.filter((_, index) => index % 2 === 0);
    },
    rightColumnProducts() {
      return this.shop.filter((_, index) => index % 2 === 1);
    },
    // 用于秒杀区域显示的商品列表
    displayShopItems() {
      // 返回更多商品用于手动滚动
      return this.shop.slice(0, 10) || [];
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    document.documentElement.style.setProperty('--status-bar-height', systemInfo.statusBarHeight + 'px');
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.nickname = value.nickname
        this.account_user = value.accountNum
        this.password_user = value.password
      }
    } catch (e) {
      console.error(e);
    }
    // 启动搜索文字轮播
    this.startSearchCarousel();
  },
  onShow() {
    this.getallshops();
    // 页面显示时重新启动轮播
    this.startSearchCarousel();
  },
  onHide() {
    // 页面隐藏时停止轮播
    this.stopSearchCarousel();
  },
  onUnload() {
    // 页面卸载时清理定时器
    this.stopSearchCarousel();
  },
  methods: {
    // 根据商品名称获取对应的图片路径
    getProductImage(item) {
      const productName = item.name_commodity || '';

      // 创建商品名称与图片的映射关系
      const productImageMap = {
        '箱式加热炉': '../../static/images/xiangshijiarelu.jpg',
        '柜式加热炉': '../../static/images/guishijiarelu.jpg',
        '搅拌器': '../../static/images/jiaobanji.jpg',
        '家用搅拌器': '../../static/images/shiyanyongfensuiji.jpg',
        '锐牌粉碎机': '../../static/images/ruipaijiaobanji.jpg',
        '粉碎机': '../../static/images/fensuiji.jpg'
      };

      // 检查商品名称是否包含映射表中的关键词
      for (const productType in productImageMap) {
        if (productName.includes(productType)) {
          return productImageMap[productType];
        }
      }

      // 如果不匹配任何特定产品类型,使用默认图片
      // 确保返回的是字符串类型
      const imageUrl = item.image;
      if (typeof imageUrl === 'string' && imageUrl) {
        return imageUrl;
      }
      return '../../static/images/jiarelu.jpg';
    },

    // 获取分类商品数据
    getCategoryProducts() {
      const currentNav = this.navItems[this.activeNavIndex];
      if (currentNav.type === 'recommend') {
        return this.shop;
      }
      return this.categoryProducts[currentNav.type] || [];
    },

    // 获取商品标签
    getProductTags(item) {
      const tags = [];
      if (item.isNew) tags.push('新品');
      if (item.originalPrice) tags.push('促销');
      if (parseFloat(item.money_commodity) < 50) tags.push('超值');
      if (Math.random() > 0.5) tags.push('热销');
      return tags.slice(0, 2); // 最多显示2个标签
    },

    // 加入购物车
    addToCart(item) {
      uni.showToast({
        title: '已加入购物车',
        icon: 'success',
        duration: 1500
      });
      console.log('加入购物车:', item);
    },

    // 立即购买
    buyNow(item) {
      uni.showToast({
        title: '立即购买',
        icon: 'success',
        duration: 1500
      });
      this.gotoshop(item);
    },

    // 启动搜索文字轮播
    startSearchCarousel() {
      this.stopSearchCarousel(); // 先清理可能存在的定时器
      this.carouselTimer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.searchTexts.length;
      }, 2000); // 每2秒切换一次
    },

    // 停止搜索文字轮播
    stopSearchCarousel() {
      if (this.carouselTimer) {
        clearInterval(this.carouselTimer);
        this.carouselTimer = null;
      }
    },

    // 监听滚动事件
    onScroll(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },

    // 切换导航
    switchNav(index) {
      this.activeNavIndex = index;
      const selectedNav = this.navItems[index];
      console.log('切换到导航:', selectedNav.name, selectedNav.type);

      // 根据不同的导航类型执行不同的逻辑
      switch (selectedNav.type) {
        case 'recommend':
          // 推荐页面逻辑
          this.loadRecommendProducts();
          break;
        case 'consumables':
          // 耗材配件页面逻辑
          this.loadConsumableProducts();
          break;
        case 'cleaning':
          // 家电清洗页面逻辑
          this.loadCleaningProducts();
          break;
        case 'home':
          // 居家生活页面逻辑
          this.loadHomeProducts();
          break;
        default:
          // 默认逻辑
          console.log('加载分类商品:', selectedNav.type);
      }
    },

    // 显示智能筛选弹窗
    showMore() {
      this.showFilterModal = true;
    },

    // 关闭筛选弹窗
    closeFilterModal() {
      this.showFilterModal = false;
    },

    // 切换筛选项开关
    toggleFilter(filterKey) {
      this.filters[filterKey].enabled = !this.filters[filterKey].enabled;
    },

    // 选择筛选选项
    selectFilter(filterKey, value) {
      this.filters[filterKey].value = value;
    },

    // 滑块变化
    sliderChange(filterKey, e) {
      this.filters[filterKey].value = e.detail.value;
    },

    // 重置筛选
    resetFilters() {
      this.filters = {
        priceRange: {enabled: false, value: ''},
        tempRange: {enabled: false, value: ''},
        tempConfig: {enabled: false, value: ''},
        tempScope: {enabled: false, value: 100},
        power: {enabled: false, value: 1000},
        heat: {enabled: false, value: 100},
        pressure: {enabled: false, value: 50},
        smartSelect: {enabled: false}
      };
    },

    // 应用筛选
    applyFilters() {
      console.log('应用筛选条件:', this.filters);

      // 将筛选条件保存到本地存储
      uni.setStorageSync('filterConditions', this.filters);

      // 关闭弹窗
      this.closeFilterModal();

      // 跳转到goods页面展示筛选结果
      uni.navigateTo({
        url: '/pages/goods/goods'
      });
    },

    // 加载推荐商品
    loadRecommendProducts() {
      this.getallshops();
    },

    // 加载耗材配件商品
    loadConsumableProducts() {
      // 这里可以调用特定的API获取耗材配件商品
      console.log('加载耗材配件商品');
    },

    // 加载家电清洗商品
    loadCleaningProducts() {
      // 这里可以调用特定的API获取清洗商品
      console.log('加载家电清洗商品');
    },

    // 加载居家生活商品
    loadHomeProducts() {
      // 这里可以调用特定的API获取居家生活商品
      console.log('加载居家生活商品');
    },

    // 跳转到我的订单页面
    goToOrder() {
      uni.navigateTo({
        url: '/pages/order/order',
        success(res) {
          console.log('Navigation to order successful', res);
        },
        fail(err) {
          console.log('Navigation to order failed', err);
        }
      })
    },

    navTo(url) {
      uni.navigateTo({
        url: url,
        success(res) {
          console.log('Navigation successful', res);
        },
        fail(err) {
          console.log('Navigation failed', err);
        }
      })
    },
    redirectToPage() {
      uni.navigateTo({
        url: '/pages/product/product'
      });
    },
    async getallshops() {
      let res = await _allshopequip()
      this.shop = res.data
      console.log(this.shop);
    },
    clicklistitem1(item) {
      const data = {
        name_commodity: item.name_commodity,
        description_commodity: item.description_commodity,
        money_commodity: item.money_commodity,
        serialnum_commodity: item.serialnum_commodity,
      }
      uni.setStorageSync('shopxiangqing', {
        data: data,
        from: '/pages/shopxiangqing/shopxiangqing'
      });
      uni.navigateTo({
        url: '/pages/shopxiangqing/shopxiangqing'
      });
    },
    scan() {
      this.navTo('/pages/saomatianjia/saomatianjia')
    },
    goSearch() {
      uni.navigateTo({
        url: '/pages/search/HM-search'
      })
    },

    // 在 shop.vue 的 methods 中修改 gotoshop 方法
    gotoshop(data) {
      console.log('🪧 商品点击,原始数据:', data);

      // 获取商品对应的图片
      let productImage = this.getProductImage(data);
      console.log('🖼️ 获取的商品图片:', productImage, '类型:', typeof productImage);

      // 再次确保 productImage 是字符串
      if (typeof productImage !== 'string') {
        console.warn('⚠️ shop.vue: productImage 不是字符串,使用默认图片', productImage);
        productImage = '../../static/images/jiarelu.jpg';
      }

      // 将图片信息也一起传递
      const productData = {
        ...data,
        productImage: productImage
      };

      console.log('💾 存储到本地的商品数据:', productData);

      // 使用同步方法存储商品数据到本地存储
      uni.setStorageSync('shoptoproduct', productData);

      // 跳转到商品详情页
      this.navTo('/pages/product/product')
    }
  },
};
</script>

<style lang="scss">
/* 页面整体布局 */
.shop-page {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 100rpx;
  padding-top: calc(var(--status-bar-height, 44px) + 190rpx); /* 为固定的header和primary-nav留出空间 */
}

/* 头部搜索栏 */
.header {
  background: white; /* 白色不透明背景 */
  padding: 15px;
  padding-top: calc(var(--status-bar-height, 44px) + 15px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 101;

  .search-container {
    display: flex;
    align-items: center;
    gap: 40rpx;

    /* 新的搜索框样式 - 支持竖向文字轮播 */
    .search-input-wrapper {
      flex: 1;
      height: 70rpx;
      border-radius: 35rpx;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      position: relative;
      overflow: hidden;
      cursor: pointer;

      .search-carousel {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .carousel-text {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          font-size: 28rpx;
          color: #999;
          opacity: 0;
          transition: all 0.5s ease-in-out;
          transform: translateY(100%);
          white-space: nowrap;

          &.active {
            opacity: 1;
            transform: translateY(-50%);
          }
        }
      }

      /* 添加一个小的搜索图标提示 */
      &::after {
        content: '';
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 24rpx;
        height: 24rpx;
        background: url('') no-repeat center;
        background-size: contain;
        opacity: 0.4;
      }
    }

    /* 新的右侧图标容器 */
    .header-icons {
      display: flex;
      align-items: center;
      gap: 30rpx;

      .header-icon {
        width: 45rpx;
        height: 40rpx;
        cursor: pointer;
        transition: transform 0.2s ease;

        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

/* 移动端风格的一级导航栏  */
.primary-nav {
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 1rpx 0 rgba(0, 0, 0, 0.06);
  position: fixed;
  top: calc(var(--status-bar-height, 44px) + 60px); /* 紧贴在header下方 */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  border-radius: 0 0 12rpx 12rpx; /* 添加圆角,右上角和右下角 */

  .nav-scroll {
    flex: 1;
    width: 0; /* 强制宽度约束 */

    /* 彻底隐藏所有平台的滚动条 */
    &::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      opacity: 0 !important;
      background: transparent !important;
    }


    .nav-list {
      display: flex;
      align-items: center;
      padding: 0 20rpx 0 30rpx;
      white-space: nowrap;

      .nav-tab {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24rpx 32rpx 20rpx;
        margin-right: 8rpx;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 8rpx;

        .nav-text {
          font-size: 30rpx;
          color: #666666;
          font-weight: 400;
          transition: all 0.25s ease;
          white-space: nowrap;
          line-height: 1.2;
        }

        .nav-indicator {
          position: absolute;
          bottom: 8rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 32rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #1890ff, #40a9ff);
          border-radius: 3rpx;
          opacity: 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        &.active {
          background-color: rgba(24, 144, 255, 0.04);

          .nav-text {
            color: #1890ff;
            font-weight: 500;
            transform: scale(1.02);
          }

          .nav-indicator {
            opacity: 1;
            transform: translateX(-50%) scale(1);
          }
        }

        &:active {
          transform: scale(0.96);
          background-color: rgba(24, 144, 255, 0.08);
        }

        /* 悬停效果 */
        &:not(.active):hover {
          background-color: rgba(0, 0, 0, 0.02);
        }
      }
    }
  }

  /* 更新后的nav-more图片样式 */
  .nav-mores {
    width: 88rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1rpx solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background: #ffffff;

    &:active {
      background-color: #f8f9fa;
    }

    .nav-more {
      width: 32rpx; /* 调整图片宽度 */
      height: 32rpx; /* 调整图片高度,保持正方形 */
      opacity: 0.6; /* 添加透明度,使图标更柔和 */
      transition: all 0.2s ease; /* 添加过渡动画 */

      /* 确保图片居中对齐 */
      object-fit: contain;

      /* 添加轻微的滤镜效果 */
      filter: grayscale(20%);
    }

    /* 悬停效果 - 如果是触摸设备则不生效 */
    @media (hover: hover) {
      &:hover .nav-more {
        opacity: 0.8;
        transform: scale(1.1);
        filter: grayscale(0%);
      }
    }

    /* 点击效果 */
    &:active .nav-more {
      transform: scale(0.9);
      opacity: 0.9;
    }
  }
}

/* 推荐内容样式保持不变 */
.recommend-content {
  /* 轮播图 */
  .carousel {
    margin: 20rpx 20rpx 30rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    swiper {
      height: 300rpx;

      .carousel-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  /* 功能导航区 - 只保留3个设备按钮 */
  .function-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    margin: 20rpx;
    padding: 40rpx 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      .nav-icon {
        width: 100rpx; /* 从80rpx增加到100rpx */
        height: 100rpx;
        border-radius: 50%;
        background: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

        image {
          width: 55rpx; /* 从45rpx增加到55rpx */
          height: 55rpx;
        }
      }

      .nav-name {
        font-size: 22rpx;
        color: #666;
        text-align: center;
      }
    }
  }

  /* 秒杀/限时特惠区域 */
  .seckill-section1 {
    margin: 30rpx 20rpx 0rpx;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      background: white;
      color: black;

      .header-left {
        .seckill-title {
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 15rpx;
        }

        .seckill-subtitle {
          font-size: 24rpx;
          opacity: 0.8;
        }
      }

      .header-right {
        display: flex;
        align-items: center;

        .more-text {
          font-size: 26rpx;
          margin-right: 5rpx;
        }

        .arrow {
          font-size: 24rpx;
        }
      }
    }

  }

  .seckill-section2 {
    background: #fff;
    margin: 0rpx 20rpx 30rpx;
    border-radius: 0 0 16rpx 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      background: white;
      color: black;

      .header-left {
        .seckill-title {
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 15rpx;
        }

        .seckill-subtitle {
          font-size: 24rpx;
          opacity: 0.8;
        }
      }

      .header-right {
        display: flex;
        align-items: center;

        .more-text {
          font-size: 26rpx;
          margin-right: 5rpx;
        }

        .arrow {
          font-size: 24rpx;
        }
      }
    }

    /* 手动滚动样式 */
    .seckill-scroll {
      white-space: nowrap;
      position: relative;

      /* 彻底隐藏滚动条 */
      &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
      }

      scrollbar-width: none !important;
      -ms-overflow-style: none !important;

      &::-webkit-scrollbar-track,
      &::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-corner {
        display: none !important;
        background: transparent !important;
        width: 0 !important;
        height: 0 !important;
      }

      .seckill-list {
        background: white;
        display: flex;
        padding: 20rpx;
        gap: 20rpx;

        .seckill-item {
          width: 160rpx;
          flex-shrink: 0;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          cursor: pointer;

          &:active {
            transform: scale(0.95);
          }

          .seckill-image {
            position: relative;
            width: 160rpx;
            height: 160rpx;
            border-radius: 12rpx;
            overflow: hidden;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s ease;

            &:hover {
              box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
            }

            image {
              width: 100%;
              height: 100%;
              transition: transform 0.2s ease;
            }

            .price-tag {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
              color: white;
              padding: 8rpx;
              display: flex;
              align-items: baseline;

              .price-symbol {
                font-size: 20rpx;
              }

              .price-num {
                font-size: 28rpx;
                font-weight: bold;
              }
            }
          }

          .seckill-info {
            padding: 10rpx 0;
            text-align: center;

            .seckill-name {
              font-size: 24rpx;
              color: #333;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }
    }
  }

  /* 商品瀑布流布局 - 兼容性版本 */
  .products-waterfall {
    display: flex;
    padding: 20rpx 20rpx;
    gap: 20rpx;
    background: transparent;

    .product-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20rpx;

      .product-item {
        background: #fff;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;

        &:active {
          transform: scale(0.98);
        }

        .product-image {
          position: relative;
          width: 100%;
          padding-bottom: 75%; /* 从100%改为75%,缩短四分之一 */
          height: 0; /* 重置高度 */

          image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .discount-tag {
            position: absolute;
            top: 10rpx;
            left: 10rpx;
            background: linear-gradient(135deg, #ff6b6b, #ff4757);
            color: white;
            padding: 4rpx 8rpx;
            border-radius: 8rpx;
            font-size: 20rpx;
            font-weight: bold;
            z-index: 1;
          }
        }

        .product-content {
          padding: 20rpx;

          .product-title {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            line-height: 1.4;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .product-desc {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 15rpx;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .current-price {
              display: flex;
              align-items: baseline;

              .currency {
                font-size: 24rpx;
                color: #ff4757;
                margin-right: 4rpx;
              }

              .amount {
                font-size: 32rpx;
                color: #ff4757;
                font-weight: bold;
              }
            }

            .sales-info {
              font-size: 20rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
}

/* 下拉菜单内容样式 - 修复定位问题 */
.dropdown-content {
  position: fixed;
  top: calc(var(--status-bar-height, 44px) + 60px + 50px); /* status bar + header + nav height */
  left: 0;
  right: 0;
  bottom: 0;
  background: #f7f7f7;
  z-index: 99; /* 低于header和nav的z-index */
  overflow: hidden;
  padding: 0;

  .vertical-scroll {
    position: absolute;
    top: 0; /* 直接从dropdown-content顶部开始 */
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    padding: 0 20rpx;
    box-sizing: border-box;

    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none !important;
    }

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    /* 商品瀑布流布局 - 兼容性版本 */
    .products-waterfall {
      display: flex;
      padding: 30rpx 0 20rpx 0;
      gap: 20rpx;
      background: transparent;

      .product-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        .product-item {
          background: #fff;
          border-radius: 12rpx;
          overflow: hidden;
          box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease;

          &:active {
            transform: scale(0.98);
          }

          .product-image {
            position: relative;
            width: 100%;
            padding-bottom: 75%; /* 从100%改为75%,缩短四分之一 */
            height: 0; /* 重置高度 */

            image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .discount-tag {
              position: absolute;
              top: 10rpx;
              left: 10rpx;
              background: linear-gradient(135deg, #ff6b6b, #ff4757);
              color: white;
              padding: 4rpx 8rpx;
              border-radius: 8rpx;
              font-size: 20rpx;
              font-weight: bold;
              z-index: 1;
            }
          }

          .product-content {
            padding: 20rpx;

            .product-title {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
              line-height: 1.4;
              margin-bottom: 10rpx;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .product-desc {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 15rpx;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .price-row {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .current-price {
                display: flex;
                align-items: baseline;

                .currency {
                  font-size: 24rpx;
                  color: #ff4757;
                  margin-right: 4rpx;
                }

                .amount {
                  font-size: 32rpx;
                  color: #ff4757;
                  font-weight: bold;
                }
              }

              .sales-info {
                font-size: 20rpx;
                color: #999;
              }
            }
          }
        }
      }
    }

    .loading-more {
      text-align: center;
      padding: 20rpx 0 140rpx 0;
      color: #999;

      .loading-text {
        font-size: 26rpx;
      }
    }
  }
}

/* 智能筛选弹窗样式 */
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;

  .filter-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    border-radius: 40rpx 40rpx 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 40rpx 30rpx;
      border-bottom: 1px solid #f0f0f0;

      .filter-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }

      .close-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60rpx;
        color: #999;
        line-height: 1;
        cursor: pointer;

        &:active {
          opacity: 0.6;
        }
      }
    }

    .filter-body {
      flex: 1;
      padding: 20rpx 40rpx;
      overflow-y: auto;

      .filter-section {
        margin-bottom: 40rpx;
        padding-bottom: 30rpx;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .section-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;

          text {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
          }
        }

        .filter-options {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
          margin-top: 20rpx;

          .option-item {
            padding: 16rpx 32rpx;
            background: #f8f9fa;
            border-radius: 40rpx;
            font-size: 28rpx;
            color: #666;
            border: 2rpx solid transparent;
            transition: all 0.3s ease;

            &.active {
              background: #e6f7ff;
              color: #1890ff;
              border-color: #1890ff;
            }

            &:active {
              transform: scale(0.95);
            }
          }
        }

        .slider-container {
          margin-top: 20rpx;
          padding: 0 20rpx;

          .slider-label {
            display: block;
            font-size: 28rpx;
            color: #1890ff;
            margin-bottom: 20rpx;
            font-weight: 500;
          }

          slider {
            width: 100%;
          }
        }
      }
    }

    .filter-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx 40rpx;
      padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
      border-top: 1px solid #f0f0f0;
      background: white;

      button {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        border: none;

        &::after {
          border: none;
        }
      }

      .reset-btn {
        background: #f8f9fa;
        color: #666;

        &:active {
          background: #e9ecef;
        }
      }

      .apply-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;

        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>